<template>
  <div class="activity">
    <div>
      <nut-tabs @change="tabChange" v-model="value" title-scroll title-gutter="10" v-if="activityTitleList">
        <nut-tab-pane :title="t(g)" :pane-key="i" v-for="(game, g, i) in activityTitleList" :key="g">
          <div class="img_box">
            <template v-for="(v, index) in game" :key="index">
              <img class="imgs" v-if="hasPic(v.pic_link)" :src="hasPic(v.pic_link)" @click="activityDetail(v)" alt="" />
            </template>
          </div>
        </nut-tab-pane>
      </nut-tabs>
    </div>
  </div>
</template>

<script setup lang="ts">
import { onMounted, onUnmounted, ref } from "vue";
import { useRouter } from "vue-router";

import pinia from "@/store/index";
import { useI18n } from "vue-i18n";

// import { User } from '@/store/user';
import { Page } from "@/store/page";
import { storeToRefs } from "pinia";
import { NetPacket } from "@/netBase/NetPacket";
// import { Net } from '@/net/Net';
import H5Websocket from "@/net/Net1";
import { Session } from "@/utils/storage";
import { MessageEvent2 } from "@/net/MessageEvent2";
import { NetMsgType } from "@/netBase/NetMsgType";
const { t } = useI18n();
const { activityTitleList } = storeToRefs(Page(pinia));
const seleteType: any = ref("home_page_all");
const router = useRouter();
const value = ref(0);
const handleActivetys = async (res: any) => {
  await Page(pinia).setActivityTitleList(res.promo);
};
// 判断配置的活动是否有图片路径
const hasPic = (str: string) => {
  if (t(str).indexOf("http") != -1) {
    return t(str);
  } else {
    return str;
  }
};
const tabChange = (item: any) => {
  value.value = item.paneKey;
  Session.set("activityNum", item.paneKey);
  const obj: any = {
    0: "home_page_all",
    1: "activities_category_7",
    2: "activities_category_11",
    3: "activities_category_100",
  };
  seleteType.value = obj[item.paneKey];
};

// const allactivityList = computed(() => {
//   return activityTitleList.value && activityTitleList.value[seleteType.value];
// });
const activityDetail = (item: any) => {
  router.push({
    path: "activityDetail",
    query: {
      pic_content: item.pic_content,
    },
  });
};
onMounted(async () => {
  seleteType.value = "home_page_all";
  value.value = Session.get("activityNum") || 0;

  // document.documentElement.style.overflow = "hidden";
  // document.body.style.overflow = "hidden";
  // //获取所有活动
  const req = NetPacket.req_activites();
  req.show = 1;
  H5Websocket.sendMessageHandler(req);
  MessageEvent2.addMsgEvent(NetMsgType.msgType.msg_notify_activites, handleActivetys);
});
onUnmounted(() => {
  // document.documentElement.style.overflow = "visible";
  // document.body.style.overflow = "visible";
  MessageEvent2.removeMsgEvent(NetMsgType.msgType.msg_notify_activites, null);
});
</script>

<style lang="scss" scoped>
.activity {
  // height: 80vh;
  // overflow: hidden;

  >div {
    padding: 10px 10px 0px;
    // position: fixed;
    width: 100%;
    // height: 100%;
  }

  // .main_content {
  //     height: 90vh;
  // }

  .img_box {
    max-height: 80vh;
    padding-bottom: 80px;
    overflow-y: auto;
  }

  .imgs {
    width: 100%;
    height: 132px;
    margin-bottom: 3px;
    border-radius: 8px;
  }
}
</style>
